<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>知识学院</title>
<%--<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">--%>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="keywords" content="">
    <link rel="shortcut icon" href="<%=basePath%>resources/images/favicon.ico"/>
<link href="resources/bootstrap/css/bootstrap-huan.css" rel="stylesheet">
<link href="resources/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<link href="resources/css/style.css" rel="stylesheet">

<!--[if lt IE 9]> 
    <script type="text/javascript" src="resources/js/util/html5.js"></script>   
<![endif-->
<!-- jQuery -->
	<script type="text/javascript" src="resources/js/jquery/jquery-1.9.0.min.js"></script>
	<!-- Bootstrap JS -->
	<script type="text/javascript" src="resources/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="resources/js/all.js?v=0712"></script>
	<script type="text/javascript" src="resources/js/training-comment.js"></script>
	<!-- <script type="text/javascript" src="resources/js/mediaelement/mediaelement-and-player.min.js"></script>
	<link href="resources/js/mediaelement/mediaelementplayer.css" rel="stylesheet">
	<link href="resources/js/mediaelement/mejs-skins.css" rel="stylesheet"> -->


	<link href="resources/js/videojs/video-js.css" rel="stylesheet">
	<script type="text/javascript" src="resources/js/videojs/video.js"></script>

	<%--<link href="resources/js/video/video-js.min.css" rel="stylesheet">
	<script type="text/javascript" src="resources/js/video/video.min.js"></script>--%>

	<script type="text/javascript">
		//设置中文
		/*videojs.addLanguage('zh-CN', {
			"Play": "播放",
			"Pause": "暂停",
			"Current Time": "当前时间",
			"Duration": "时长",
			"Remaining Time": "剩余时间",
			"Stream Type": "媒体流类型",
			"LIVE": "直播",
			"Loaded": "加载完毕",
			"Progress": "进度",
			"Fullscreen": "全屏",
			"Non-Fullscreen": "退出全屏",
			"Mute": "静音",
			"Unmute": "取消静音",
			"Playback Rate": "播放速度",
			"Subtitles": "字幕",
			"subtitles off": "关闭字幕",
			"Captions": "内嵌字幕",
			"captions off": "关闭内嵌字幕",
			"Chapters": "节目段落",
			"Close Modal Dialog": "关闭弹窗",
			"Descriptions": "描述",
			"descriptions off": "关闭描述",
			"Audio Track": "音轨",
			"You aborted the media playback": "视频播放被终止",
			"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
			"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
			"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
			"No compatible source was found for this media.": "无法找到此视频兼容的源。",
			"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
			"Play Video": "播放视频",
			"Close": "关闭",
			"Modal Window": "弹窗",
			"This is a modal window": "这是一个弹窗",
			"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
			", opens captions settings dialog": ", 开启标题设置弹窗",
			", opens subtitles settings dialog": ", 开启字幕设置弹窗",
			", opens descriptions settings dialog": ", 开启描述设置弹窗",
			", selected": ", 选择",
			"captions settings": "字幕设定",
			"Audio Player": "音频播放器",
			"Video Player": "视频播放器",
			"Replay": "重播",
			"Progress Bar": "进度小节",
			"Volume Level": "音量",
			"subtitles settings": "字幕设定",
			"descriptions settings": "描述设定",
			"Text": "文字",
			"White": "白",
			"Black": "黑",
			"Red": "红",
			"Green": "绿",
			"Blue": "蓝",
			"Yellow": "黄",
			"Magenta": "紫红",
			"Cyan": "青",
			"Background": "背景",
			"Window": "视窗",
			"Transparent": "透明",
			"Semi-Transparent": "半透明",
			"Opaque": "不透明",
			"Font Size": "字体尺寸",
			"Text Edge Style": "字体边缘样式",
			"None": "无",
			"Raised": "浮雕",
			"Depressed": "压低",
			"Uniform": "均匀",
			"Dropshadow": "下阴影",
			"Font Family": "字体库",
			"Proportional Sans-Serif": "比例无细体",
			"Monospace Sans-Serif": "单间隔无细体",
			"Proportional Serif": "比例细体",
			"Monospace Serif": "单间隔细体",
			"Casual": "舒适",
			"Script": "手写体",
			"Small Caps": "小型大写字体",
			"Reset": "重启",
			"restore all settings to the default values": "恢复全部设定至预设值",
			"Done": "完成",
			"Caption Settings Dialog": "字幕设定视窗",
			"Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
			"End of dialog window.": "结束对话视窗"
		});*/
		videojs.options.flash.swf="resources/js/videojs/video-js.swf";
		$(function(){
			document.oncontextmenu = function(){
				util.error("页面右键已被禁用");
				return false;
			}
			//flash
			var myPlayer = _V_("my_video");
			//h5
			/*var myPlayer = videojs(my_video);*/
			var count = 0;
			var timer;
			myPlayer.on('play',function(){
				timer = setInterval(function(){
					count ++;
				},1000);
			});
			myPlayer.on('paused',function(){
				clearInterval(timer);
			});
			myPlayer.on('ended',function(){
				myPlayer.currentTime(0);
				myPlayer.pause();
				var duration = parseFloat($("#training-duration").val());
				var process = 0;
				if(duration + count >= myPlayer.duration()){
					//视频播放完毕后，如果持续时间大于视频时间，则培训完成，进度100%
					process = 1;
				}else{
					//视频播放完毕，提交培训历史，进度为持续时间/视频持续时间
					process = (duration + count) / myPlayer.duration();
				}
				var data= new Object();
				data.sectionId = $("#section-id").val();
				data.duration = duration + count;
				data.process = process;
				data.trainingId = $("#training-id").val();
				jQuery.ajax({
					headers : {
						'Accept' : 'application/json',
						'Content-Type' : 'application/json'
					},
					type : "POST",
					url : "student/set-training-hist",
					data : JSON.stringify(data),
					success : function(message, tst, jqXHR) {
						if (message.result == "success") {
							util.success("培训进度上传成功！当前章节进度为：" + process);
						} else {
							util.error("培训进度上传失败！");
						}
					},
					error : function(){
						util.error("上传培训进度错误，请稍后尝试！");
					}
				});
			});
		});
	</script>
<style>
.training-top {
	position: absolute;
	top: 0;
	left: 0;
	height: 50px;
	line-height: 50px;
	padding-left: 10px;
	background-color: #1ba1e2;
	color: #FFF;
	font-size: 16px;
	width: 100%;
}

.control-pane {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #FFF;
	height: 100%;
	width: 287px;
	z-index: 100;
}

body, html {
	margin: 0px;
	height: 100%;
}

.autoHeight {
	/* width:100%; */
	position:relative;
	height: 100%;
	background: rgb(31, 31, 31);
	margin-right: 287px;
	padding-top: 50px;
}

.section-title {
	margin-left: 50px;
}

.nav-tabs>li>a {
	border-radius: 0 0 0 0;
}

.nav-tabs>li>a:hover {
	border-color: #FFF #FFF #ddd;
}

.section-list, .comment-list {
	list-style: none;
	padding-left: 0;
	padding-top: 5px;
	color:#FFF;
}

.section-list {
	background-color: #f0f0f0;
}

/* 		.comment-list{
			list-style: none;
			} */
.section-list li {
	
}

.section-list li:hover {
	background-color: #f0f0f0;
	cursor: pointer;
}

.section-list li.active {
	background-color: #1ba1e2;
	color: #FFF;
}

.section-list li.active a {
	color: #FFF;
}

.section-list li div {
	padding: 10px;
	margin-left: 20px;
	border-left: 1px solid #FFF;
	padding-left: 10px;
}

.section-list li i {
	position: relative;
	left: -16px;
}

.comment-user-info {
	padding-left: 40px;
}

.comment-user-img-content {
	width: 30px;
	position: absolute;
	top: 0px;
	left: 0px;
}

.comment-user-container {
	position: relative;
}

.comment-user-img {
	width: 30px;
}

.comment-date {
	font-size: 10px;
}

.comment-list-item {
	margin-bottom: 20px;
}

.tab-content {
	padding: 0px;
	border: 0;
}

.video-div{
	
}
</style>

</head>

<body>

	<!-- Navigation bar starts -->



	<!-- Navigation bar ends -->

	<!-- Slider starts -->

	<div class="autoHeight">

		<div class="training-top">
            <a href="training-list" style="color: white">
                <i class="fa fa-chevron-circle-left"></i>
            </a>
			<!-- 课程主页 -->

			<span>${section.trainingName }</span> <span class="section-title">${section.sectionName }</span>
		</div>

		<div class="video-div" style="background-color: #000; height: 100%;">
			<input type="hidden" value="${sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username}" id="username">
			<input type="hidden" value="${duration }" id="training-duration">
			<input type="hidden" value="${sectionId}" id="section-id">
			<input type="hidden" value="${section.trainingId}" id="training-id">
			<%--<input type="hidden" value="${section.trainingId}" id="training-id">	--%>
			<video id="my_video" class="video-js vjs-default-skin" controls preload="none" width="100%" height="100%" style="width:100%;height:100%;"
		      poster="resources/images/bg.png"
		      data-setup="{}">
			<%--<video id="my_video" class="video-js" controls preload="auto" width="100%" height="100%" style="width:100%;height:100%;"
				poster="resources/images/bg.png" data-setup="{}">--%>
		      	<c:choose>
		      		<c:when test="${section.fileType eq '.mp4' }">
		      			<source src="${section.filePath }" type='video/mp4'>
		      		</c:when>
		      		<c:when test="${section.fileType eq '.flv' }">
		      			<source src="${section.filePath }" type='video/flv'>
		      		</c:when>
		      		<c:otherwise>
		      			<source src="${section.filePath }">
		      		</c:otherwise>
		      	</c:choose>
			    			    
  			</video>

		</div>

		<div style="background-color: #000; height: 100%; display: none;">

		</div>
	</div>
	<div class="control-pane">
		<ul id="myTabs" class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active"><a href="#home"
				id="home-tab" role="tab" data-toggle="tab" aria-controls="home"
				aria-expanded="true"> <i class="fa fa-th-list"></i> 选择章节
			</a></li>
			<li role="presentation"><a href="#profile" role="tab"
				id="profile-tab" data-toggle="tab" aria-controls="profile"><i
					class="fa fa-comments-o"></i> 评论</a></li>
		</ul>
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="home">
				<ul class="section-list">
					<c:forEach items="${sectionList }" var="item">
						<c:choose>
							<c:when test="${item.sectionId == sectionId }">
								<li class="active">
									<div>
										<i class="fa fa-video-camera"></i> <a>${item.sectionName }</a>
									</div>
								</li>
							</c:when>
							<c:otherwise>
								<li>
									<div>
										<i class="fa fa-video-camera"></i> <a href="student/training/${item.trainingId }?sectionId=${item.sectionId}">${item.sectionName }</a>
									</div>
								</li>
							</c:otherwise>
						</c:choose>
						
					</c:forEach>
				</ul>
			</div>
			<div role="tabpanel" class="tab-pane" id="profile">
				<div class="expand-bk-content" id="bk-conent-comment"
					style="margin-top: 10px; padding: 10px;">
					<div id="comment-title" style="margin-bottom: 15px;">
						<i class="fa fa-comments"></i> <span> 学员评论 </span>

					</div>
					<form class="comment-form">
						<textarea rows="" cols="" style="width: 100%; height: 95px;"
							placeholder="随便说点什么吧..."></textarea>
						<input class="btn btn-primary" type="submit" value="发表评论">
					</form>
					<div class="comment-total">
						<span class="comment-total-num">0</span>条评论
					</div>
					<ul class="comment-list">
												
					</ul>
				</div>
				<div id="show-more-div">
					<input type="hidden" id="idx-hidden" value="2"> 
					<input type="hidden" id="last-floor-hidden" value="0">
					<button id="show-more-btn" disabled="disabled" style="margin:10px 0 10px 0;">没有更多评论了...</button>
				</div>
			</div>
		</div>
	</div>


	<!-- Slider Ends -->

	<!-- Javascript files -->
	
	
	
</body>
</html>
